<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ request.getContextPath() + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>频道页面</title>
<link rel="stylesheet" href="dist/css/site.min.css">
<script type="text/javascript" src="dist/js/site.min.js"></script>
</head>
<body>
	<div>
		<nav class="navbar navbar-inverse" role="navigation">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#bs-content-row-navbar-collapse-6">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				
				<h4 style="color: #ECF0F1;">
				<span class="glyphicon glyphicon-globe"></span>
				投票</h4>
			</div>
		</div>
		</nav>

		<div class="container-fluid">
			<!--documents-->

			<div class="row row-offcanvas row-offcanvas-left active">
				<div class="col-xs-6 col-sm-3 sidebar-offcanvas" role="navigation">
					<ul class="list-group panel">
						<li class="list-group-item"><i
							class="glyphicon glyphicon-align-justify"></i> <b>选择频道</b> <span
							class=" glyphicon glyphicon-chevron-right"></span></li>

					</ul>
				</div>
				<div class="col-xs-12 col-sm-9 content">
					<div class="panel panel-default">
						<div class="panel-heading">
							<h3 class="panel-title">
								<a href="javascript:void(0);" class="toggle-sidebar"><span
									class="fa fa-angle-double-right" data-toggle="offcanvas"
									title="Maximize Panel"></span></a>
							</h3>
						</div>
						${msg}
						<div class="panel-body">
							<div class="bs-example">
								<table class="table table-hover">
									<thead>
										<tr>
											<th></th>
											<th><span class="glyphicon glyphicon-leaf"></span></th>
											<th>频道</th>
											<th></th>
										</tr>
									</thead>

									<tbody>

										<c:forEach items="${channels }" var="channel"
											varStatus="status">
											<tr>
												<td>
												<td>${status.index+1 }</td>
												<td>${channel.title }</td>
												<td><a href="votes/${channel.id}"><span
														class="glyphicon glyphicon-heart-empty">点击进入</span></td>
											</tr>
										</c:forEach>

									</tbody>
								</table>
							</div>
						</div>
						<!-- panel body -->
					</div>
				</div>
				<!-- content -->
			</div>
</body>
</html>